<script setup lang="ts">
import { reactive, watch } from 'vue';
import { NForm, NFormItem, NInput } from 'naive-ui';

interface AIPrompt {
  prompt: string;
}

interface Props {
  prompt: AIPrompt;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (e: 'update:prompt', prompt: AIPrompt): void;
}>();

// Create a local reactive copy to avoid direct mutation of props
const localPrompt = reactive<AIPrompt>({
  ...props.prompt
});

// Watch for prop changes and update local copy
watch(
  () => props.prompt,
  newPrompt => {
    Object.assign(localPrompt, newPrompt);
  },
  { deep: true }
);

function updatePrompt(value: string) {
  const newPrompt = { ...localPrompt, prompt: value };
  Object.assign(localPrompt, newPrompt);
  emit('update:prompt', newPrompt);
}
</script>

<template>
  <div class="h-full flex flex-col">
    <NForm>
      <NFormItem :show-label="false">
        <NInput
          type="textarea"
          :value="localPrompt.prompt"
          placeholder="描述你想要创建的网站的内容，例如：创建一个现代化的企业官网首页..."
          :rows="25"
          @update:value="updatePrompt"
        />
      </NFormItem>
    </NForm>
  </div>
</template>

<style scoped></style>
